<template>
  <view>
    <view class="box-box">
      <u-swipe-action>
        <u-swipe-action-item
            v-for="(item,index) in list"
            @click="toOption(item)"
            :options="option1">
      <view
          class="address-card-box">
        <!-- 邮政编码 -->
        <view class="zip">
          {{ $i18n.zhToGlobal('邮政编码') }}：{{ item.postalCode }}
        </view>

        <view class="lv0-lv1-address">
          <view class="lv0-address">{{$i18n.toGlobal(item.stateAreaCode,"stateArea")}}</view>
          <view class="lv1-address">
            <text v-if="item.level1Name">{{item.level1Name}}</text>
            <text v-if="item.level2Name" style="margin-left: 10rpx">{{item.level2Name}}</text>
            <text v-if="item.level3Name" style="margin-left: 10rpx">{{item.level3Name}}</text>
          </view>
        </view>
        <view
            class="lv2-address">
          {{ item.detail }}
        </view>
        <view
            class="name-phone">
          {{item.receiverName}} +{{ item.phoneAreaCode }} {{ item.phone }}
          <view
              v-if="item.isDefault"
              class="default">
            {{ $i18n.zhToGlobal('默认') }}</view>
        </view>
        <image
            @click="$kt.router.navTo('/pages/address/saveAddress',item)"
            class="edit-icon"
            :src="$kt.file.byPath('image/edit.svg')"
        ></image>
      </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>

    <view style="height: 150rpx"></view>

    <view class="bottom">
      <view
          @click="$kt.router.navTo('/pages/address/saveAddress')"
          class="add-address">
        <view class="add-text">
          {{ $i18n.zhToGlobal('添加新地址') }}
        </view>
      </view>
      <view style="height: 10rpx"></view>
    </view>

    <u-modal :show="isDeleteModal"
             :showCancelButton="true"
             :title="$i18n.zhToGlobal('提示')"
             :content="$i18n.zhToGlobal('是否确定删除该地址')"
             :confirm-text="$i18n.zhToGlobal('确定')"
             :cancel-text="$i18n.zhToGlobal('取消')"
             @cancel="isDeleteModal = false"
             :closeOnClickOverlay="true"
             @confirm="deleteAddress(itemOfDelete)"
    ></u-modal>

  </view>
</template>

<script>
export default {
  data() {
    return {
      isDeleteModal: false,
      list: [],
      option1: [
        {
          text: this.$i18n.zhToGlobal('删除'),
          style: {
            backgroundColor: '#F4333C'
          }
        }
      ],
      itemOfDelete: {}
    };
  },
  created() {
    // 修改编码
    uni.setNavigationBarTitle({
      title: this.$i18n.zhToGlobal('收货地址')
    });
    this.getList();
    this.$kt.event.on("addressChange", () => {
      this.getList();
    });
  },
  methods: {
    toOption(item){
      this.isDeleteModal = true;
      this.itemOfDelete = item;
    },
    deleteAddress(item){
      uni.showLoading({
        title: this.$i18n.zhToGlobal('删除中')
      });
      this.$kt.request.send({
        uri: "/business-shop-web/shopAddressInUserAccount/deleteSelf",
        data: {
          id: item.id
        },
        stateSuccess: () => {
          uni.hideLoading();
          this.isDeleteModal = false;
          this.getList();
        },
        stateFail: (res) => {
          uni.hideLoading();
          this.isDeleteModal = false;
          uni.showToast({
            title: res.errMsg,
            icon: 'none'
          });
        }
      });
    },

    // /business-shop-web/shopAddressInUserAccount/getSelf
    getList(){
      this.$kt.request.send({
        uri: "/business-shop-web/shopAddressInUserAccount/getSelf",
        stateSuccess: (res) => {
          this.list = res.data;
          // 将isDefault为true的放到最前面
          this.list.sort((a, b) => {
            if (a.isDefault) {
              return -1;
            } else {
              return 1;
            }
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>

.box-box {
  padding: 20rpx;
  box-sizing: border-box;
}

.address-card-box {
  position: relative;
  padding: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #f0f0f0;

  .zip {
    font-size: 24rpx;
    color: #999;
  }

  .edit-icon {
    position: absolute;
    right: 20rpx;
    width: 60rpx;
    height: 60rpx;
    top: 50%;
    transform: translateY(-50%);
  }

  .edit-icon:active {
    transform: translateY(-50%) scale(0.9);
  }


  .lv0-lv1-address {

    .lv0-address {
      display: inline-block;
      font-size: 32rpx;
      color: #333;
      margin-right: 10rpx;
    }

    .lv1-address {
      display: inline-block;
      font-size: 28rpx;
      color: #666;
    }

  }


  .lv2-address {
    font-size: 24rpx;
    color: #999;
  }

  .name-phone {
    font-size: 28rpx;
    color: #666;
  }

  .default {
    display: inline-block;
    text-align: center;
    font-size: 24rpx;
    color: #fff;
    background-color: rgba(0,0,0,.5);
    border-radius: 20rpx;
    padding: 5rpx 10rpx 5rpx 10rpx;
    margin-left: 10rpx;
  }
}


.bottom {
  position: fixed;
  padding: 20rpx;
  background-color: #fff;
  box-sizing: border-box;
  width: 100%;
  bottom: 0;
  z-index: 100;
  text-align: center;

  .add-address {
    display: inline-block;
    background-color: #000008;
    width: 100%;
    height: 100rpx;
    color: #fff;
    border-radius: 20rpx;
    line-height: 100rpx;
  }

  .add-address:active {
    background-color: #000008;
    opacity: 0.9;
  }

}

</style>
